<template>
  <div class="app-container flex-colum" style="height: 90vh">
    <el-row :gutter="20">
      <el-col :span="9">
        <div class="userContainer flex-row-center">
          <img class="avator" src="@/assets/images/user_avator.png"/>
          <div class="flex-colum-start-sb" style="height: 120px">
                        <span style="font-size: 20px; font-weight: bold"
                        >您好！欢迎登录近多出行后台管理系统</span
                        >
            <span>用户角色：{{ roles }}</span>
            <span>所属公司：{{ companyName }}</span>
          </div>
        </div>
      </el-col>
      <el-col :span="15">
        <div class="taskContainer">
          <div class="flex-row-center">
            <img
                style="width: 12px; height: 12px"
                src="@/assets/images/task_ring.png"
                alt=""
            />
            <span
                style="
                                margin-left: 10px;
                                font-size: 16px;
                                font-weight: bold;
                            "
            >我的任务</span
            >
          </div>
          <div
              class="flex-row-center-sb"
              style="margin-top: 20px; padding: 0 20px;cursor:pointer;"
          >
            <div
                class="taskItem flex-row-xy-center"
                @click="handleMytask(1)"
            >
              <img
                  src="@/assets/images/task_approve.png"
                  alt=""
              />
              <div
                  class="flex-row-center"
                  style="margin-left: 16px"
              >
                <span>待我审批</span>
                <span class="taskNum">{{ agencyTotal }}</span>
              </div>
            </div>
            <div
                class="taskItem flex-row-xy-center"
                style="background-color: #fff2e2"
                @click="handleMytask(2)"
            >
              <img src="@/assets/images/task_copy.png" alt=""/>
              <div
                  class="flex-row-center"
                  style="margin-left: 16px"
              >
                <span>抄送我的</span>
                <span class="taskNum" style="color: #ff5b18">{{
                    copyTotal
                  }}</span>
              </div>
            </div>
            <div
                class="taskItem flex-row-xy-center"
                style="background-color: #d7f9f3"
                @click="handleMytask(3)"
            >
              <img src="@/assets/images/task_apply.png" alt=""/>
              <div
                  class="flex-row-center"
                  style="margin-left: 16px"
              >
                <span>我发起的</span>
                <span class="taskNum" style="color: #1eb098">{{
                    myStartTotal
                  }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <div class="flex-xy-center otherContainer">
      <img
          style="width: 220px; height: 220px"
          src="@/assets/images/home_empty.png"
          alt=""
      />
      <span>暂无数据</span>
    </div>
  </div>
</template>

<script>
import {taskStatistics} from "@/api/workTable/index";

export default {
  name: "Index",
  data() {
    return {
      statistics: [],
      agencyTotal: 0,
      copyTotal: 0,
      myStartTotal: 0,
    };
  },
  computed: {
    roles() {
      const roles = this.$store.state.user?.userInfo?.roles;
      let roleNames = [];
      if (roles && roles.length > 0) {
        roleNames = roles.map((item) => {
          return item.roleName;
        });
      }
      let roleNamesStr = roleNames.join(",");
      return roleNamesStr;
    },
    companyName() {
      return this.$store.state.user?.userInfo?.dept?.deptName || "--";
    },
  },
  mounted() {
    this.getTaskStatistics();
  },
  activated() {
    this.getTaskStatistics();
  },
  methods: {
    //获取我的任务
    getTaskStatistics() {
      taskStatistics().then((res) => {
        this.statistics = res.rows;
        this.statistics.forEach((item) => {
          if (item.category == "agencyTotal") {
            this.agencyTotal = item.value;
          } else if (item.category == "copyTotal") {
            this.copyTotal = item.value;
          } else if (item.category == "myStartTotal") {
            this.myStartTotal = item.value;
          }
        });
      });
    },
    handleMytask(type) {
      switch (type) {
        case 1:
          if(this.checkPermi(['flowable:examine:list'])){
            this._toPage({
              name: "Approve",
            });
          }else {
            this.$message.warning('无权限')
          }

          break;
        case 2:
          if(this.checkPermi(['flowable:examine:cclist'])){
            this._toPage({
              name: "CClist",
            });
          }else {
            this.$message.warning('无权限')
          }

          break;
        case 3:
          if(this.checkPermi(['flowable:examine:mylist'])){
            this._toPage({
              name: "Mylist",
            });
          }else {
            this.$message.warning('无权限')
          }

          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.userContainer {
  min-height: 200px;
  background: #ffffff;
  border-radius: 8px;
  padding: 40px 24px;
  font-size: 16px;
  color: #333333;

  .avator {
    width: 120px;
    height: 120px;
    margin-right: 20px;
  }
}

.taskContainer {
  min-height: 200px;
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;

  .taskItem {
    padding: 0 20px;
    height: 100px;
    border-radius: 8px;
    background-color: #e2f4ff;

    img {
      width: 60px;
      height: 60px;
    }

    .taskNum {
      margin-left: 8px;
      color: #1890ff;
      font-weight: bold;
    }
  }
}

.otherContainer {
  margin-top: 20px;
  background: #ffffff;
  border-radius: 8px;
  padding: 100px 0;
  color: #333333;
  font-size: 16px;
  margin-top: 20px;
  flex: 1;
}
</style>

